<template>
  <div class="course-practice">

    <loading-page after-loading-page="playContentPageVoice"
                  background-color="https://fangti-mcdn.oss-cn-beijing.aliyuncs.com/appstatic/background/bg_practice.png"
                  img="pic_pratise@2x.png">

      <div class="course-practice-detail">
        <nav-bar
          class="nav-bar-position"
        >
          练一练 {{ current + 1 > lessonDetail.count ? lessonDetail.count :current + 1 }} / {{lessonDetail.count}}
        </nav-bar>
        <white-space/>

        <div class="course-practice-progress-wrap">

          <div :class="'bean-width-'+lessonDetail.count" class="course-practice-progress">
            <div
              :class="['bean-'+(index+1) ,{'gray-filter':(bean_current - 1 < index )}]"
              :key="index" class="icon-wrap"
              v-for="(bean,index) in lessonDetail.count">
              <my-img
                :class="['bean-'+(index+1) ,{'gray-filter':(bean_current - 1 < index ) || !answerList[index]}]"
                class-name="ico-beans"
                src="ico_beans@2x.png"
              />
            </div>
          </div>
        </div>

        <white-space :height="35"/>

        <div class="question">
          <my-img @tap="playContentPageVoice" class-name="ico_voice_d" src="ico_voice_d@2x.png"
                  v-if="currentPlayState !== 'record'"/>
          <my-img class-name="ico_voice_d" src="_voice.gif" v-else/>
          <span>{{  lessonDetail.info[current].content }} </span>
        </div>

        <div class="pic">
          <my-img :src="lessonDetail.info[current].picture" class-name="gr"/>
        </div>

        <div v-if="timeOut">
          <div class="answer-pics" v-if="lessonDetail.info[current].options[0].picture">
            <div :key="i"
                 @tap="_startAnimation({is_answer:pic.is_answer,i,id:pic.id})"
                 class="options"
                 v-for=" (pic,i)  in lessonDetail.info[current].options"
                 v-if="currentTime  > parseInt( pic.epoch) - 1 ">
              <div class="counter" v-if="state[i] === 0">{{ i + 1 }}</div>
              <div class="counter" style="background: none" v-if="state[i] === 1">
                <my-img class-name="answer-pic-c" src="error.png"/>
              </div>
              <div class="counter" style="background: none" v-if="state[i] === 2">
                <my-img class-name="answer-pic-c" src="is_right.png"/>
              </div>

              <my-img
                :src="pic.picture"
                class-name="answer-pic"
                v-if="pic.picture"
              />


            </div>

          </div>

          <div class="answer-btn" v-if="!lessonDetail.info[current].options[0].picture">
            <div :class="{select:state[i] !== 0}" :key="i"
                 @tap="_startAnimation({is_answer:v.is_answer,i,id:v.id})"
                 v-for=" (v,i)  in lessonDetail.info[current].options"
                 v-if="currentTime > parseInt( v.epoch) - 1 "
            >
              <my-img class="ico" class-name="ico" src="error.png" v-if="state[i] === 1"/>
              <my-img class="ico" class-name="ico" src="is_right.png" v-if="state[i] === 2"/>
              <span v-if="state[i] === 0"> {{}}</span>
              {{ v.option_content }}
            </div>

          </div>
        </div>

      </div>


      <div
        :animation="animation"
        :style="{'z-index':!animationShow?'-199999':'999999999999999999'}"
        class="b-start"
      >
        <my-img
          :src="'b123.gif?' + current"
          class-name="b-start-png"
          v-if="!isAnimationEnd && animationShow"
        />
        <my-img
          :src="'get_bean.gif?' + current"
          class-name="btn-rec-ico"
          v-else-if="isAnimationEnd && animationShow"
        />
      </div>

      <loading/>
    </loading-page>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  import { RedirectTo } from "../../utils/router";
  import LoadingPage from "../../component/loading-page/loading-page";
  import { soundList } from "../../api/url.config";

  export default {
    name: "course_practice",
    components: { LoadingPage },
    data() {
      return {
        timeOut: false,

        isLoading: true,

        flag: false,

        state: [0, 0],

        answerList: [],

        progress: 0,

        times: []

      }
    },
    computed: {
      ...mapState('Course', ['lessonDetail']),
      ...mapState('Tools', ['isAnimationEnd', 'animationShow', 'animation', 'currentTime', 'current', 'currentPlayState', 'bean_current'])
    },
    methods: {
      ...mapActions('Course', ['reqLessonDetail', 'reqCompleteTask']),
      ...mapActions('Tools', ['startRecord', 'endRecord', 'playVoice', 'startAnimation', 'playNextVoice', 'stopPlay', 'playErrorVoice', 'playContentPageVoice', '_continuePlaying', '_pause']),
      RedirectTo,

      async _startAnimation({ is_answer, i, id }) {
        const { current, lessonDetail, type_id, currentPlayState } = this;

        if (this.answerList.length - 1 === Number.parseInt(this.current)) {
          console.log('已经做过该题');
          return
        }

        if (currentPlayState) {
          return
        }

        if (this.flag) {
          return
        }
        this.flag = true;

        let waitAnimationTime = is_answer === 0 ? 1500 : 2500;
        if (is_answer === 0) {
          this.state[i] = 1;
          this.playErrorVoice({ voicePath: soundList.error })
        } else {
          this.state[i] = 2;
          this.playErrorVoice({ voicePath: soundList.right });
          let waitRight = setTimeout(() => {
            this.startAnimation({ current, target: this });
          }, 700);
          this.times.push(waitRight)
        }
        this.answerList.push(is_answer === 1);

        await this.reqCompleteTask({ id: lessonDetail.info[current].id, type_id, answer_id: id });


        let waitAnimation = setTimeout(() => {

          this.playNextVoice({ target: this, count: this.answerList.filter(item => item).length });

          this.flag = false;
          setTimeout(() => this.timeOut = false, waitAnimationTime);
          // 4s 后等录音
          let waiOptionShow = setTimeout(() => {
            this.timeOut = true;
            this.state = [0, 0];

          }, 6000);

          this.times.push(waiOptionShow)
        }, waitAnimationTime);

        this.times.push(waitAnimation)
      },


    },
    async onLoad(query) {
      setTimeout(() => {
        this.timeOut = true
      }, 6000);
      const { id, type_id, progress } = query;
      this.id = id;
      this.type_id = type_id;
      this.progress = progress;
      await this.reqLessonDetail({ id, type_id });
    },

    onUnload() {
      this.stopPlay();
      this.timeOut = false;
      this.times.forEach(item => clearTimeout(item))
    },
    onShow() {
      this._continuePlaying()
    },
    onHide() {
      this._pause()
    }
  }
</script>

<style lang="scss">
  @import "../../uni";

  .course {
    &-practice {
      overflow: scroll;

      &-detail {
        background: #fff;
      }

      &-wrap {
        background-color: #C0D9FD;
        min-height: 100vh;
      }

      &-loading-pic {
        width: 100vw;
        height: upx(1334);
      }

      .course-practice-progress-wrap {
        position: fixed;
        width: 100vw;
        height: upx(70);
        z-index: 99999999999;
        background: linear-gradient(-309deg, #46DBB4 0%, #3BB6BC 100%);
      }

      &-progress {
        position: relative;
        top: upx(20);
        left: 0;
        right: 0;
        margin: auto;
        background: white;
        box-shadow: 0 upx(4) upx(28) 0 rgba(122, 137, 130, 0.18);
        border-radius: upx(200);
        display: flex;
        justify-content: space-between;
        padding: upx(8);

        .icon-wrap {
          width: upx(80);
          height: upx(80);
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(309deg, rgba(9, 182, 188, 1) 0%, rgba(0, 224, 180, 1) 100%);
          border-radius: 50%;
        }

        .ico-beans {
          width: upx(44);
          height: upx(38);
        }
      }

      .question {
        width: upx(614);
        display: flex;
        align-items: flex-start;
        margin: upx(90) 0 upx(40) upx(80);
        @include ft(36, #5D6473, 500);

        .ico_voice_d {
          margin-right: upx(24);
          width: upx(48);
          height: upx(48);
        }
      }

      .pic {
        text-align: center;

        .gr {
          width: upx(590);
          height: upx(444);
          border-radius: upx(48);
          border: upx(12) solid #fff;
          box-shadow: 0 upx(4) upx(36) 0 rgba(122, 137, 130, 0.14);
        }
      }

      .answer-btn {
        margin: upx(66) 0;

        > div {
          display: flex;
          align-items: center;
          justify-content: center;
          width: upx(590);
          height: upx(104);
          line-height: upx(104);
          text-align: center;
          background: rgba(255, 255, 255, 1);
          border-radius: upx(24);
          border: upx(2) solid rgba(93, 100, 115, 1);
          @include ft(36, #5D6473, 500);
          margin: upx(44) auto;

          &.select {
            background: linear-gradient(309deg, rgba(9, 182, 188, 1) 0%, rgba(0, 224, 180, 1) 100%);
            border: none;
          }

          .ico {
            width: upx(48);
            height: upx(48);
            display: inline;
          }
        }
      }
    }
  }

  .answer-pics {
    display: flex;
    width: upx(614);
    justify-content: space-between;
    margin: upx(68) auto;
    counter-reset: time;
    position: relative;

    .options {
      position: relative;
    }


    .counter {
      position: absolute;
      width: upx(52);
      height: upx(52);
      top: upx(-26);
      left: 0;
      right: 0;
      margin: auto;
      border: 2px solid #fff;
      border-radius: 50%;
      background: #5D6473;
      content: counter(time);
      text-align: center;
      line-height: upx(52);
      @include ft(32, #fff, 500)
    }


    .answer-pic {
      width: upx(264);
      height: upx(264);
      border: upx(12) solid #fff;
      border-radius: upx(48);

    }

  }
</style>
